<template>
  <div class="home">
    <h1>Home</h1>
    <el-button type="primary" @click="add">
      你点击了 {{ count }} 次.
    </el-button>
    <ol>
      <li v-for="(item, index) of list" :key="index">
        {{ item.text }}
      </li>
    </ol>
    <el-button type="primary" @click="cItem">
      Add #{{ list.length + 1 }}
    </el-button>
    <hr />
    <ol>
      <li v-for="(item, index) of gt1000" :key="index">
        {{ item.text }}
      </li>
    </ol>
  </div>
</template>
<!-- 状态管理 react + redux + react-router -->
<!-- 状态管理 vue + vuex + vue-router -->
<script>
import { mapState, mapGetters } from "vuex";

export default {
  name: "Home",
  // state
  computed: {
    ...mapState(["count", "list"]),
    ...mapGetters(["gt1000"])
    /*count1() {
      return this.$store.state.count
    },
    list() {
      return this.$store.state.list
    }*/
  },
  methods: {
    /*...mapMutations({
      add: 'INCREMENT'
    })*/
    /*...mapMutations(['INCREMENT', 'CREATE_ITEM']),*/
    add() {
      // console.log(this.$store.getters.gt1000)
      // console.log(this.$store)
      // this.$store.commit("INCREMENT");
      // this.INCREMENT()
      this.$store.dispatch("increment");
    },
    cItem() {
      this.$store.dispatch("creatItem", {
        id: Number.parseInt(Math.random() * 1000),
        text: Date.now()
      });
      /*this.CREATE_ITEM({
        id: Number.parseInt(Math.random() * 1000),
        text: Date.now()
      })*/
      // this.$store.commit('CREATE_ITEM', {
      //   id: Number.parseInt(Math.random() * 1000),
      //   text: Date.now()
      // })
      // this.$store.commit({
      //   type: 'createItem',
      //   data: {
      //     id: Number.parseInt(Math.random() * 1000),
      //     text: Date.now()
      //   }
      // })
    }
  }
};
</script>
